<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Gridx Mobile</title>
	<link href="../../../dojox/mobile/themes/iphone/base.css" rel="stylesheet"/>
	<link href="../../../dojox/mobile/themes/iphone/TabBar.css" rel="stylesheet"/>
	<link href="../themes/iphone/Grid.css" rel="stylesheet"/>
	<script>
		var djConfig = {
			packages: [
				{
					name: 'gridx',
					location: '../gridx'
				}
			]
		};
	</script>
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: false, mblAlwaysHideAddressBar: true"></script>
	
	<style>
		.mobileGridxBody		{	background-color: #3D567A;}
		.mobileGridxRow 		{	background-color: #3D567A; border-bottom: 2px solid #2D3E57;}
		.mobileGridxRowOdd 		{	background-color: #344865;}
		td.mobileGridxCell		{	color: #fff; font-size: 14px; text-shadow: 1px 1px 2px #000; padding: 3px;}
		td.temp					{	font-size: 22px; font-weight: bold;}
		td.tempMin				{	color: #7696C1;}
	</style>
	
	<script>
		var columns = [
			{field: 'day', width: '50%', title: 'Day'},
			{field: 'max', width: '16%', title: 'Max', cssClass: 'temp', template: '${max}°'},
			{field: 'min', width: '16%', title: 'Min', cssClass: 'temp tempMin', template: '${min}°'}
		];
		require([
			'dojo/domReady',
			'dojo/data/ItemFileReadStore',
			'dojox/mobile/parser',
			'gridx/mobile/tests/support/data',
			"dojox/mobile",
			"dojox/mobile/compat",
			'dojox/mobile/Heading',
			'dojox/mobile/View',
			'dojox/mobile/ScrollableView',
			'dojox/mobile/TabBar',
			'gridx/mobile/Grid'
		], function(ready, ItemFileReadStore, parser, data){
			ready(function(){
				parser.parse();
				grid.store = new ItemFileReadStore({data: {items: data.weather}});
				grid.setColumns(columns);
			});
		});
	</script>		
</head>

<body style="visibility:hidden;">
	<div id="group1" dojoType="dojox.mobile.View" selected="true">
		<h1 dojoType="dojox.mobile.Heading">Weather</h1>
		<div dojoType="gridx.mobile.Grid" jsId="grid" showHeader="false"></div>
		<ul dojoType="dojox.mobile.TabBar" fixed="bottom" style="border-bottom:none;">
			<li dojoType="dojox.mobile.TabBarButton" icon1="../../../dojox/mobile/tests/images/tab-icon-16.png" icon2="../../../dojox/mobile/tests/images/tab-icon-16h.png" selected="true" moveTo="group1">Featured</li>
			<li dojoType="dojox.mobile.TabBarButton" icon1="../../../dojox/mobile/tests/images/tab-icon-15.png" icon2="../../../dojox/mobile/tests/images/tab-icon-15h.png" moveTo="categ">Categories</li>
			<li dojoType="dojox.mobile.TabBarButton" icon1="../../../dojox/mobile/tests/images/tab-icon-10.png" icon2="../../../dojox/mobile/tests/images/tab-icon-10h.png" moveTo="top25">Top 25</li>
			<li dojoType="dojox.mobile.TabBarButton" icon1="../../../dojox/mobile/tests/images/tab-icon-11.png" icon2="../../../dojox/mobile/tests/images/tab-icon-11h.png" moveTo="search">Search</li>
		</ul>
	</div>
</body>
</html>